<template>
  <div class="base-container" id="main">
      <!-- 基本信息 -->
      <t-form ref="form" class="step-form" :colon="true" :data="formData" :rules="rules" labelWidth="180px">
        <t-row style="align-items: stretch" :gutter="14">
          <t-col :span="12">
            <t-card class="step-card" size="small" title="基本信息">
              <t-row style="align-items: stretch" :gutter="14">
                <t-col :span="6">
                  <t-form-item label="年度" name="year">
                    <t-select style="width: 390px;" clearable v-model="formData.year">
                      <t-option v-for="(item, index) of yearList" :key="index" :label="item.value" :value="item.key">{{
                        item.value }}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>
                <t-col :span="6">
                  <t-form-item label="月度" name="month">
                    <t-select style="width: 390px;" clearable v-model="formData.month">
                      <t-option v-for="(item, index) of monthList" :key="index" :label="item.value" :value="item.key">{{
                        item.value }}</t-option>
                    </t-select>
                  </t-form-item>
                </t-col>
              </t-row>
              <t-row style="align-items: stretch" :gutter="14">
                <t-col :span="12">
                  <t-form-item label="调度表名称" name="name">
                    <t-input clearable style="width: 390px" v-model="formData.name"></t-input>
                  </t-form-item>
                </t-col>
              </t-row>
            </t-card>
          </t-col>
        </t-row>
<!-- dispatchTables  -->
        <t-row>
          <t-col :span="12">
            <t-form-item name="dispatchTables" label="项目明细" labelAlign="top" style="margin-bottom: 10px">
              <t-table row-key="id" :columns="columns" :data="formData.dispatchTables">
                <template #sort="{row}">
                  {{ row.sort}}
                </template>
                <template #itemName="{row}">
                  {{ row.itemName}}
                </template>
                <template #unit="{row}">
                  {{ row.unit}}
                </template>
                <template #note="{row}">
                  <t-input :type="![1,2,3].includes(row.sort) ? 'number' : 'text'" clearable v-model="row.note"></t-input>
                </template>
              </t-table>
            </t-form-item>
          </t-col>
        </t-row>
        <t-row style="margin-top: 20px;text-align: center">
          <t-col :span="12">
            <t-space :size="10">
              <t-button theme="primary" :loading="applyLoading" @click="onSubmit">{{
                  applyLoading ? '提交中...' : '提交'
                }}
              </t-button>
            </t-space>
          </t-col>
        </t-row>

      </t-form>
  </div>
</template>

<script>

export default {
  name: "dispatch-apply",
  components: {
  },
  dicts: [],
  data() {
    return {
      site_tag: import.meta.env.VITE_SITE_TAG,
      columns: [
        {
          colKey: "sort",
          title: "序号",
          align: "center",
          width: 64
        },
        {
          colKey: "itemName",
          title: "项目",
          align: "center",
        },

        {
          colKey: "unit",
          title: "单位",
          align: "center",
          width: 96
        },
        {
          colKey: "note",
          title: "有关情况",
          align: "left",
        },
      ],
      formData: {
        year: "",
        month: "",
        name: "",
        dispatchTables: [
          {
            sort: 1,
            itemName: "科技创新情况",
            unit: "/",
            note: ""
          },
          {
            sort: 2,
            itemName: "数字化转型亮点工作",
            unit: "/",
            note: ""
          },
          {
            sort: 3,
            itemName: "科技创新工作目前主要存在的困难或问题",
            unit: "/",
            note: ""
          },
          {
            sort: 4,
            itemName: "研发投入(当前快报数)",
            unit: "万元",
            note: ""
          },
          {
            sort: 5,
            itemName: "主营业务收入(当前快报数)",
            unit: "万元",
            note: ""
          },
          {
            sort: 6,
            itemName: "今年以来发表的核心及以上论文数量",
            unit: "篇",
            note: ""
          },
          {
            sort: 7,
            itemName: "今年以来取得的有效专利数量",
            unit: "项",
            note: ""
          },
          {
            sort: 7,
            itemName: "其中，发明专利数量",
            unit: "项",
            note: ""
          },
          {
            sort: 8,
            itemName: "今年以来获批发布的省级地方标准数量",
            unit: "项",
            note: ""
          },
          {
            sort: 9,
            itemName: "今年以来获批发布的行业标准数量",
            unit: "项",
            note: ""
          },
          {
            sort: 10,
            itemName: "今年以来获批发布的国家标准数量",
            unit: "项",
            note: ""
          },
          {
            sort: 11,
            itemName: "今年以来取得的省级工法(省住建厅批准)数量",
            unit: "项",
            note: ""
          },
          {
            sort: 12,
            itemName: "今年以来获批认定的“高新技术”“科技型”“创新型”“专精特新”等科技型企业数量",
            unit: "个",
            note: ""
          },
        ],
      },
      monthList: [
        { key: 1, value: "1月" },
        { key: 2, value: "2月" },
        { key: 3, value: "3月" },
        { key: 4, value: "4月" },
        { key: 5, value: "5月" },
        { key: 6, value: "6月" },
        { key: 7, value: "7月" },
        { key: 8, value: "8月" },
        { key: 9, value: "9月" },
        { key: 10, value: "10月" },
        { key: 11, value: "11月" },
        { key: 12, value: "12月" }
      ],
      yearList: [],
      applyLoading: false,
      rules: {
        year: [
          {
            required: true,
            message: "年度不能为空",
          },
        ],
        month: [
          {
            required: true,
            message: "月度不能为空",
          },
        ],
        name: [
          {
            required: true,
            message: "调度表名称不能为空",
          }
        ],
      },
    }
  },
  mounted() {
  },
  created() {
    const year = new Date().getFullYear();
    for (let i = year; i >= year - 15; i--) {
      this.yearList.push({ key: i, value: `${i}年` });
    }
    this.formData.year = year;
    this.formData.month = new Date().getMonth() + 1;
    this.formData.name = `${year}年度集团科技创新工作调度表`;
  },
  methods: {
    close() {
      this.$tab.closeOpenPage({path: this.$route.meta.activeMenu});
    },
    onSubmit() {
      this.$refs.form.validate().then((validateResult) => {
        if (validateResult === true) {
          this.applyLoading = true;
          this.$api.cgzh.dispatch.add(this.formData).then((res) => {
            this.applyLoading = false;
            if (res.code === 200) {
              this.$message.success("提交成功");
              this.close();
            } else {
              this.$message.error(res.msg);
            }
          }).catch((err) => {
            this.applyLoading = false;
            this.$message.error(err.message);
          });
        } else {
          const firstError = Object.values(validateResult)[0]?.[0]?.message;
          this.$message.error(firstError);
        }
      }).catch(() => {
        console.log("提交失败,请重试");
      });
    }
  }
}
</script>

<style lang="less" scoped>
.step-form {
  padding: 0 24px;
}

.t-row {
  margin-bottom: 14px;
}

.step-card {
  height: 100%;
  margin-bottom: 14px;
}
</style>
